import Avatar from './AvatarDropdown';
import Breadcrumb from './Breadcrumb';
import NotificationDropdown from './NotificationDropdown';
import { Badge, Flex } from 'antd';
import { BellOutlined, GithubOutlined, MessageOutlined } from '@ant-design/icons';
import github from '@/static/images/github-fill.png';


import styles from './index.less';

const GlobalHeader = (_props) => {

    const gotoSourceCode = ()=>{
        window.open('https://gitee.com/lyqjob/project-root')
    }
  
  return (
    <div className={styles.container}>
        <div className={styles.leftbox}>
            <Breadcrumb/>
        </div>
        <div className={styles.rightbox}>
            <Flex align="center" gap={10} style={{height:'100%'}}>
                <NotificationDropdown>
                    <Badge count={7} size="small" offset={[-4, 4]}>
                        <span className={styles.iconWrapper}>
                            <MessageOutlined />
                        </span>
                    </Badge>
                </NotificationDropdown>
                <NotificationDropdown>
                    <Badge count={3} size="small" offset={[-4, 4]}>
                        <span className={styles.iconWrapper}>
                            <BellOutlined />
                        </span>
                    </Badge>
                </NotificationDropdown>
                <span className={styles.iconWrapper} onClick={gotoSourceCode}>
                    <GithubOutlined />
                </span>
                <Avatar />
            </Flex>
        </div>
        
    </div>
  );
};

export default GlobalHeader;
